<!-- 日期搜索框 -->
<template>
  <div id = "myDate" >
     <!-- <el-button icon="el-icon-caret-left"  @click="dateChange(4)" ></el-button> -->
    <el-select v-model="yearsModel" @change="dateChange(1)" placeholder="请选择" style="width:100px;">
        <el-option
          v-for="item in years"
          :key="item.value"
          :label="item.label"
          :value="item.value">
        </el-option>
      </el-select>
        <el-select v-model="monthsModel" @change="dateChange(2)" placeholder="请选择" style="width:100px;">
        <el-option
          v-for="item in months"
          :key="item.value"
          :label="item.label"
          :value="item.value">
        </el-option>
      </el-select>
        <el-select v-model="daysModel" @change="dateChange(3)" placeholder="请选择" style="width:100px;">
        <el-option
          v-for="item in days"
          :key="item.value"
          :label="item.label"
          :value="item.value">
        </el-option>
      </el-select>
      <!-- <el-button icon="el-icon-caret-right"   @click="dateChange(5)"  ></el-button> -->

  </div>
</template>

<script>
export default {
  props: {
    yearP: {
      default: 1991
    },
    monthP: {
      default: 1
    },
    dayP: {
      default: 1
    }
  },
  data () {
    return {
      yearsModel: null,
      years: [],
      monthsModel: null,
      months: [],
      daysModel: null,
      days: []
    }
  },

  created () {
    this.init()
  },
  methods: {
    init () {
      // var myDate = new Date()
      // var yearPre = myDate.getFullYear()// 获取当前年
      // var month = myDate.getMonth() + 1// 获取当前月
      // var day = myDate.getDate()// 获取当前日
      var year = this.yearP
      var month = this.monthP
      var day = this.dayP
      this.initSelectYear(year)
      this.initSelectMonth()
      this.initSelectDay(year, month)
      this.yearsModel = year
      this.monthsModel = month
      this.daysModel = day
      const obj = { year: this.yearsModel, month: this.monthsModel, day: this.daysModel }
      this.$parent.dateChange(obj)
    },
    initSelectYear (year) {
      var myDate = new Date()
      var yearPre = myDate.getFullYear() // 获取当前年
      this.years = []
      for (let i = 0; i < 50; i++) {
        this.years.push({ value: (yearPre - i), label: (yearPre - i) + '年' })
      }
    },
    initSelectMonth () {
      this.months = []
      for (let i = 1; i <= 12; i++) {
        this.months.push({ value: i, label: i + '月' })
      }
    },
    initSelectDay (year, month) {
      var maxDay = this.getMaxDay(year, month)
      this.days = []
      for (var i = 1; i <= maxDay; i++) {
        this.days.push({ value: i, label: i + '日' })
      }
    },
    dateChange (type) {
      // 1年 2月 3日 4 左 5右
      if (type === 1 || type === 2) {
        if (this.monthsModel === 0) {
          this.daysModel = 0
          this.initSelectDay(this.yearsModel, 1)
        } else {
          this.initSelectDay(this.yearsModel, this.monthsModel)
        }
      }
      if (type === 4) {
        this.dayleft()
      }
      if (type === 5) {
        this.dayright()
      }

      // 操作父组件方法
      const obj = { year: this.yearsModel, month: this.monthsModel, day: this.daysModel }
      this.$parent.dateChange(obj)
    },
    dayleft () {
      var tmpYear = this.yearsModel
      var tmpMonth = this.monthsModel
      var tmpDay = this.daysModel
      if (tmpYear === null) {
        var myDate = new Date()
        var year = myDate.getFullYear()// 获取当前年
        var month = myDate.getMonth() + 1// 获取当前月
        var day = myDate.getDate()// 获取当前日
        this.yearsModel = year
        this.monthsModel = month
        this.daysModel = day
        return
      }
      if (tmpMonth === null) { tmpMonth = 0 }
      if (tmpDay === null) { tmpDay = 0 }

      var yearV = tmpYear
      var monthV = tmpMonth
      var dayV = tmpDay

      if ((tmpMonth === 0 || tmpMonth === 1) && (tmpDay === 0 || tmpDay === 1)) {
        yearV = tmpYear - 1; monthV = 12
        dayV = this.getMaxDay(tmpYear, tmpMonth)
      }
      if (!(tmpMonth === 0 || tmpMonth === 1) && (tmpDay === 0 || tmpDay === 1)) {
        monthV = tmpMonth - 1
        dayV = this.getMaxDay(tmpYear, tmpMonth)
      }
      if ((tmpMonth === 0 || tmpMonth === 1) && !(tmpDay === 0 || tmpDay === 1)) {
        dayV = tmpDay - 1
      }
      if (!(tmpMonth === 0 || tmpMonth === 1) && !(tmpDay === 0 || tmpDay === 1)) {
        dayV = tmpDay - 1
      }
      this.yearsModel = yearV
      this.monthsModel = monthV
      this.daysModel = dayV
    },
    dayright () {
      var myDate = new Date()
      var year = myDate.getFullYear()// 获取当前年
      var month = myDate.getMonth() + 1// 获取当前月
      var day = myDate.getDate()// 获取当前日

      var tmpYear = this.yearsModel
      var tmpMonth = this.monthsModel
      var tmpDay = this.daysModel

      if (tmpYear === null) {
        var mydate = new Date()
        var years = mydate.getFullYear()// 获取当前年
        var months = myDate.getMonth() + 1// 获取当前月
        var days = myDate.getDate()// 获取当前日
        this.yearsModel = years
        this.monthsModel = months
        this.daysModel = days
        return
      }

      if (tmpMonth === null) { tmpMonth = 0 }
      if (tmpDay === null) { tmpDay = 0 }
      if (tmpYear > year) {
        this.yearsModel = year
        this.monthsModel = month
        this.daysModel = day
        return
      }
      if (tmpYear === year) {
        if ((tmpMonth > month || tmpMonth === 0) || (tmpMonth === month) && (tmpDay >= day || tmpDay === 0)) {
          this.yearsModel = year
          this.monthsModel = month
          this.daysModel = day
          return
        }
      }

      var maxDay = this.getMaxDay(tmpYear, tmpMonth)
      var yearV = tmpYear
      var monthV = tmpMonth
      var dayV = tmpDay

      if ((tmpMonth === 0 || tmpMonth === 12) && (tmpDay === 0 || tmpDay === maxDay)) {
        yearV = tmpYear + 1; monthV = 1
        dayV = 1
      }
      if (!(tmpMonth === 0 || tmpMonth === 12) && (tmpDay === 0 || tmpDay === maxDay)) {
        monthV = tmpMonth + 1
        dayV = 1
      }
      if (!(tmpMonth === 0 || tmpMonth === 12) && !(tmpDay === 0 || tmpDay === maxDay)) {
        dayV = tmpDay + 1
      }

      this.yearsModel = yearV
      this.monthsModel = monthV
      this.daysModel = dayV
    },
    getMaxDay (year, month) {
      var newyear = year // 取当前的年份
      var newmonth = month++// 取下一个月的第一天，方便计算（最后一天不固定）
      if (month > 12) {
        newmonth -= 12 // 月份减
        newyear++ // 年份增
      }
      var newdate = new Date(newyear, newmonth, 1)// 取当年当月中的第一天
      return (new Date(newdate.getTime() - 1000 * 60 * 60 * 24)).getDate()// 获取当月最后一天日期
    }
  }
}
</script>
